---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Leaflet Image
description: Zoom and pan around a map then take a screenshot as an image.
tags:
  - plugins
---
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>

<style>
.ui-button {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1000;
  }
#map {
  width:50%;
  }
#snapshot {
  position:absolute;
  top:0;bottom:0;right:0;
  width:50%;
  }
</style>

<button id='snap' class='ui-button'>Take a snapshot</button>
<div id='snapshot'></div>
<div id='map'></div>

<script>
var snapshot = document.getElementById('snapshot');
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([38.88995, -77.00906], 15);

document.getElementById('snap').addEventListener('click', function() {
    leafletImage(map, doImage);
});

function doImage(err, canvas) {
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    snapshot.innerHTML = '';
    snapshot.appendChild(img);
}
</script>
